<template>
  <div style="padding: 16px; padding-bottom: 40px;">
    <div style="position: sticky;top: 16px; background-color: #fff;">
        <div style="display: flex;justify-content: space-between;align-items: center;font-size: 18px;">
            <span @click="router.go(-1)" style="display: inline-block;width: 50px;font-weight: bolder;">&lt;</span>
            <span style="font-weight: bolder;">我的发布</span>
            <span style="display: inline-block;width: 50px;"></span>
        </div>
        <div style="display: flex;justify-content: space-around;border-bottom: 1px solid #eee;font-size: 12px;margin-top: 10px;">
            <div @click="xz=''" :style="`height: 25px; width: 7%; white-space: noWrap; display: flex; justify-content: center; box-sizing: border-box; border-bottom: ${xz===''?'3px solid blue':''}; color: ${xz===''?'blue':''}; font-weight: ${xz===''?700:''}`">全部({{ list.length }})</div>
            <div @click="xz='1'" :style="`height: 25px; width: 7%; white-space: noWrap; display: flex; justify-content: center; box-sizing: border-box; border-bottom: ${xz==='1'?'3px solid blue':''}; color: ${xz==='1'?'blue':''}; font-weight: ${xz==='1'?700:''}`">正在招({{ list.filter(i => i.isFlag==='1').length }})</div>
            <div @click="xz='0'" :style="`height: 25px; width: 7%; white-space: noWrap; display: flex; justify-content: center; box-sizing: border-box; border-bottom: ${xz==='0'?'3px solid blue':''}; color: ${xz==='0'?'blue':''}; font-weight: ${xz==='0'?700:''}`">已关闭({{ list.filter(i => i.isFlag==='0').length }})</div>
        </div>
    </div>
    
    <div>
        <div v-for="i in zlist" :key="i._id" @click="router.push(`/details/${i._id}`)" style="padding: 20px 0; border-bottom: 1px solid #eee;">
            <div style="display: flex;">
                <span v-if="i.isFlag==='1'" style="width: 12%; display: flex; justify-content: center; align-items: center; background-color: rgb(242, 242, 242); color: rgb(50, 255, 50); font-size: 10px;margin-right: 5px;">正在招</span>
                <span v-if="i.isFlag==='0'" style="width: 12%; display: flex; justify-content: center; align-items: center; background-color: rgb(242, 242, 242); color: orangered; font-size: 10px;margin-right: 5px;">已关闭</span>
                <span style="white-space: nowrap; overflow: hidden; width: 88%; text-overflow: ellipsis;">{{ i.text }}</span>
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div style="display: flex; gap: 0 10px; white-space: noWrap; overflow: hidden; text-overflow: ellipsis;">
                    <div v-for="j in i.job" :key="j.id" style="background-color: rgb(229, 239, 255); color: blue; font-size: 14px; margin-top: 5px;padding: 0 5px;">{{ j.name }}</div>
                </div>
                <div style="font-size: 10px; color: #999;">{{ i.datetime }}</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onBeforeMount, onBeforeUpdate, ref } from 'vue';
import { useRouter } from 'vue-router';
axios.defaults.baseURL='http://127.0.0.1:3000'

interface i {
    _id: any,
    name: string,
    city: string,
    address: string,
    tel: string,
    salary: string,
    job: any[],
    text: string,
    imgs: string[],
    img: string,
    datetime: string,
    isFlag: string
}

let router = useRouter()
let xz = ref('')
let list = ref<i[]>([])
let zlist = ref<i[]>([])

let getlist = () => {
    axios.get('/getrelease').then(i => {
        if(i.data.code === 200){
            list.value = i.data.data
        }
    }
)}

onBeforeMount(() => {
    getlist()
})

onBeforeUpdate(() => {
    zlist.value = list.value.filter((i:object) => (i as any).isFlag.includes(xz.value))
})
</script>

<style>

</style>